<template>
  <div class="seeker-container">
    <div class="header">
      <h1>求职材料上传系统</h1>
      <p>请下载模板填写后上传您的求职材料</p>
    </div>

    <div class="card-container">
      <div class="template-card">
        <h2>下载求职模板</h2>
        <div class="template-preview">
          <img src="@/assets/lawyerlogo.png" alt="文档图标" class="doc-icon">
          <p>DemandTemp.docx</p>
        </div>
        <button @click="downloadTemplate" class="download-btn" :disabled="downloading">
          {{ downloading ? '下载中...' : '下载模板' }}
        </button>
      </div>

      <div class="upload-card">
        <h2>上传求职材料</h2>

        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :show-file-list="false"
          :before-upload="beforeUpload"
          accept=".docx,.pdf"
          :disabled="uploading"
        >
          <div class="upload-content">
            <i class="el-icon-upload" :class="{ 'uploading': uploading }"></i>
            <div class="el-upload__text">
              <template v-if="!uploading">
                将文件拖到此处，或<em>点击上传</em>
              </template>
              <template v-else>
                正在上传中...
              </template>
            </div>
            <div class="el-upload__tip">只能上传docx/pdf文件，且不超过20MB</div>
          </div>
        </el-upload>

        <div v-if="selectedFile" class="file-info">
          <div class="file-details">
            <i class="el-icon-document"></i>
            <span class="file-name">{{ selectedFile.name }}</span>
            <span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
          </div>
          <el-button type="danger" circle @click="removeFile" :disabled="uploading">
            <i class="el-icon-delete"></i>
          </el-button>
        </div>

        <div class="form-group">
          <label>求职者姓名 <span class="required">*</span></label>
          <el-input v-model="seekerName" placeholder="请输入您的真实姓名" maxlength="20" show-word-limit />
        </div>

        <el-button
          type="primary"
          @click="submitFile"
          :disabled="!selectedFile || !seekerName || uploading"
          :loading="uploading"
          class="submit-btn"
        >
          {{ uploading ? '上传中...' : '提交材料' }}
        </el-button>
      </div>
    </div>

    <el-dialog v-model="successDialogVisible" title="上传成功" width="400px" :close-on-click-modal="false">
      <div class="success-dialog">
        <i class="el-icon-success success-icon"></i>
        <p>您的求职材料已成功上传！</p>
        <p class="success-tip">请耐心等待管理员审核。</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="successDialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { formatFileSize } from '@/utils/format'

const selectedFile = ref(null)
const seekerName = ref('')
const uploading = ref(false)
const downloading = ref(false)
const successDialogVisible = ref(false)

const beforeUpload = (file) => {
  const ext = file.name.split('.').pop().toLowerCase()
  const valid = ['docx', 'pdf'].includes(ext)
  const sizeOk = file.size <= 20 * 1024 * 1024
  if (!valid) ElMessage.error('只能上传docx或pdf文件')
  if (!sizeOk) ElMessage.error('文件大小不能超过20MB')
  return valid && sizeOk
}

const handleFileChange = (file) => {
  if (beforeUpload(file.raw)) {
    selectedFile.value = file.raw
    ElMessage.success('文件已选择，请填写姓名后提交')
  }
}

const removeFile = () => {
  selectedFile.value = null
}

const downloadTemplate = async () => {
  downloading.value = true
  try {
    const res = await axios.get('/documents/template', { responseType: 'blob' })
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'DemandTemp.docx')
    link.click()
    ElMessage.success('模板下载成功')
  } catch (e) {
    ElMessage.error('模板下载失败')
  } finally {
    downloading.value = false
  }
}

const submitFile = async () => {
  if (!selectedFile.value || !seekerName.value) return
  try {
    await ElMessageBox.confirm('确认提交求职材料？提交后无法修改。', '确认提交', {
      confirmButtonText: '确认提交',
      cancelButtonText: '取消',
      type: 'warning'
    })
  } catch {
    return
  }

  uploading.value = true
  const formData = new FormData()
  formData.append('file', selectedFile.value)
  formData.append('seekerName', seekerName.value)

  try {
    await axios.post('/documents/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    successDialogVisible.value = true
    selectedFile.value = null
    seekerName.value = ''
  } catch (e) {
    ElMessage.error('上传失败，请重试')
  } finally {
    uploading.value = false
  }
}
</script>

<style scoped>
.seeker-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.header h1 {
  font-size: 2.8rem;
  margin-bottom: 15px;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header p {
  font-size: 1.3rem;
  opacity: 0.95;
  font-weight: 300;
}

.card-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 25px;
  flex-wrap: wrap;
}

.template-card, .upload-card {
  flex: 1;
  min-width: 350px;
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.template-card:hover, .upload-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.template-card {
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.template-card h2, .upload-card h2 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.8rem;
  border-bottom: 3px solid #4b6cb7;
  padding-bottom: 15px;
  font-weight: 600;
}

.template-preview {
  margin: 25px 0;
  padding: 35px;
  border: 2px dashed #b8d4fe;
  border-radius: 12px;
  background-color: #f9fbff;
  transition: all 0.3s ease;
}

.template-preview:hover {
  border-color: #4b6cb7;
  background-color: #edf4ff;
  transform: scale(1.02);
}

.doc-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.template-preview:hover .doc-icon {
  opacity: 1;
}

.template-preview p {
  font-weight: 600;
  color: #4b6cb7;
  font-size: 1.1rem;
  margin: 0;
}

.download-btn {
  margin-top: 25px;
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(75, 108, 183, 0.3);
}

.download-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a5998 0%, #1a2f5c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 108, 183, 0.4);
}

.download-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

.upload-demo {
  margin-bottom: 25px;
}

.upload-content {
  padding: 30px;
}

.upload-content .el-icon-upload {
  font-size: 4rem;
  color: #4b6cb7;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.upload-content .el-icon-upload.uploading {
  animation: rotating 2s linear infinite;
  color: #409EFF;
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.el-upload__text {
  font-size: 1.2rem;
  color: #606266;
  margin-bottom: 12px;
}

.el-upload__text em {
  color: #4b6cb7;
  font-style: normal;
  font-weight: 600;
}

.el-upload__tip {
  color: #909399;
  font-size: 0.95rem;
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  border-radius: 10px;
  margin-bottom: 25px;
  border-left: 4px solid #4b6cb7;
  box-shadow: 0 2px 8px rgba(75, 108, 183, 0.1);
}

.file-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  flex: 1;
}

.file-details .el-icon-document {
  font-size: 1.5rem;
  color: #4b6cb7;
}

.file-name {
  font-weight: 600;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.file-size {
  color: #7a8ca5;
  font-size: 0.9rem;
  white-space: nowrap;
}

.remove-btn {
  padding: 10px;
  background: #ff5e5e;
  color: white;
  transition: all 0.3s ease;
}

.remove-btn:hover:not(:disabled) {
  background: #ff3c3c;
  transform: scale(1.1);
}

.remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  color: #2c3e50;
  font-weight: 600;
  font-size: 1.1rem;
}

.required {
  color: #f56c6c;
  margin-left: 4px;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(75, 108, 183, 0.3);
  margin-top: 10px;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a5998 0%, #1a2f5c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 108, 183, 0.4);
}

.submit-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 上传状态区域 */
.upload-status {
  margin-top: 40px;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e8e8;
}

.upload-status h2 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.8rem;
  border-bottom: 3px solid #4b6cb7;
  padding-bottom: 15px;
  font-weight: 600;
}

.status-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-card {
  padding: 20px;
  border: 1px solid #e8f4ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafdff 0%, #f0f7ff 100%);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(75, 108, 183, 0.08);
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(75, 108, 183, 0.15);
  border-color: #4b6cb7;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 15px;
}

.file-name {
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-time {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.comments {
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
  line-height: 1.4;
}

.empty-state {
  text-align: center;
  padding: 60px 30px;
  color: #7a8ca5;
  background: linear-gradient(135deg, #f9fbff 0%, #f0f5ff 100%);
  border-radius: 15px;
  margin-top: 40px;
  border: 2px dashed #c3d5f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 20px;
  display: block;
  color: #c3d5f0;
  opacity: 0.8;
}

.empty-state p {
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.empty-tip {
  font-size: 1rem !important;
  color: #9aabbf;
  font-weight: 400 !important;
}

/* 成功对话框 */
.success-dialog {
  text-align: center;
  padding: 20px 10px;
}

.success-icon {
  font-size: 4rem;
  color: #67C23A;
  margin-bottom: 20px;
  display: block;
}

.success-dialog p {
  font-size: 1.2rem;
  color: #303133;
  margin-bottom: 8px;
  font-weight: 500;
}

.success-tip {
  color: #909399 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .seeker-container {
    padding: 15px;
  }

  .header {
    padding: 20px 15px;
    margin-bottom: 30px;
  }

  .header h1 {
    font-size: 2rem;
  }

  .header p {
    font-size: 1.1rem;
  }

  .card-container {
    flex-direction: column;
    gap: 20px;
  }

  .template-card, .upload-card {
    min-width: unset;
    padding: 20px;
  }

  .template-preview {
    padding: 25px;
  }

  .upload-status {
    padding: 20px;
    margin-top: 30px;
  }

  .status-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .file-name {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 1.8rem;
  }

  .template-card h2, .upload-card h2 {
    font-size: 1.5rem;
  }

  .doc-icon {
    width: 60px;
    height: 60px;
  }

  .download-btn, .submit-btn {
    font-size: 1.1rem;
    padding: 12px;
  }
}
</style>
